<template>
 <div>
     <div class="left" @mouseout="handleHideList">
        <div class="content">
            <div class="cityItem" 
            v-for="(item,index) in data" 
            :key="index" 
            @mouseover="handlelList(index)" 
            >
                {{item.type}} <i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <ul class="list" 
        :class="{active:isShow}" 
        @mouseover="isShow=true"
        >
            <li v-for="(item,index) in scenicSpotList"
            :key="index">
                <span class="index">{{index}}</span>
                <a href="#" class="cityName" @click="handlePostsList(item.city)">{{item.city}}</a>
                <a href="#" class="scenicSpot" @click="handlePostsList(item.city)"> {{item.desc}}</a>
            </li>
            
        </ul>
    </div>
    <div class="rcommendCity">
        <p>推荐城市</p>
        <img src="http://img3.imgtn.bdimg.com/it/u=4061135862,3167765695&fm=26&gp=0.jpg" alt="">
    </div>
 </div>
</template>

<script>
export default {
    props:{
        data:{
            type:Array,
            default:[]
        }
    },
    data(){
        return {
            isShow:false,
            scenicSpotList:[]
        }
    },
    methods:{
        // 显示列表
        handlelList(index){
            this.isShow=true;
            this.scenicSpotList=this.data[index].children
        },
        handleHideList(){
            this.isShow=false;
        },
        handlePostsList(item){
            this.$emit('handlePostsList',item)
        }
    }
}
</script>

<style lang="less" scoped>
.left{
    width: 260px;
    max-height: 165px;
    position: relative;
}
.content{
    width: 240px;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
    border: 1px solid rgb(221, 221, 221);
    cursor: pointer;
    .cityItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        line-height: 44px;
        padding: 0 20px;
        border-bottom: 1px solid rgb(221, 221, 221);
       /deep/ .el-icon-arrow-right{
           color: rgb(221, 221, 221);
           font-size: 20px;
       }
       &:last-child{
           border-bottom:none;
       }
       &:hover{
           color: #ffa500;
           /deep/ .el-icon-arrow-right{
               color: #ffa500;
           }
           
       }
    }
}
.list{
    display: none;
    padding: 10px 20px;
    width: 400px;
    box-sizing: border-box;
    position: relative;
    top: -181px;
    right: -238px;
    background-color: #fff;
    border: 1px solid rgb(221, 221, 221);
    border-left: none;
    &.active{
        display: block;
    }
    li{
       
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        .index{
           font-size: 22px;
           color: #ffa500;
           font-style: italic;
           font-weight: 600;
        }
        /deep/.cityName{
            color: #ffa500;
            margin: 0 12px;
            &:hover{
                // text-decoration-line:underline;
                text-decoration:underline solid #ffa500;
            }
        }
        .scenicSpot{
            color: #999;
             &:hover{
                // text-decoration-line:underline;
                text-decoration:underline solid #999;
            }
        }
    }
}
.rcommendCity{
    margin-top: 20px;
    p{
        color: #333;
        padding-bottom: 10px;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 10px;
    }
    img{
        width: 100%;
        height: 174px;
        object-fit: cover;
    }
}
</style>